<template>
  <div>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        size="small"
        class="add-btn"
        icon="el-icon-plus"
        @click="$router.push({name:'goodsCategoryApply'})"
      >申请品类</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="category_name"
        label="品类名称"
        width="300" align="center">
      </el-table-column>
      <el-table-column
        prop="category_rate"
        label="品类费率"
        min-width="300" 
        align="center">
      </el-table-column>
      <el-table-column
        prop="ischeck"
        label="审核状态"
        width="150" 
        align="center">
        <template slot-scope="scope">
          <el-tag 
            class="tagClass"
            size="small"
            :class="scope.row.ischeck == 1 ? 'tag_success' : scope.row.ischeck == 2? 'tag_warn' : 'tag_danger'"
            :type="scope.row.ischeck == 1 ? 'success' : scope.row.ischeck == 2? 'warning' : 'danger'"
          >{{scope.row.ischeck == 1 ? "已审核" : scope.row.ischeck == 2? '待审核' : "拒绝审核"}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="申请时间"
        width="100" 
        align="center">
      </el-table-column>
      <el-table-column
        prop="reason"
        label="审核拒绝原因"
        width="200" 
        align="center">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="220" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            v-if="$hasMethod('#edit') && scope.row.ischeck == 3"
            @click="handleClick('submit',scope.row)" 
          >重新提交</el-button>
          <el-button 
            size="small"
            type="danger"
            v-if="$hasMethod('#delete') && scope.row.ischeck == 3"
            @click="handleClick('delete',scope.row)" 
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>

  </div>
</template>

<script>
import customPage from "@/components/customPage"
import addDialog from "./add"
import { getCategoryList, updateStatus, delCategory } from "@/api/category"
export default {
  components: {customPage, addDialog},
  data () {
    return {
      total: 0,
      tableData: []
    }
  },
  methods: {
    handleClick(type,row){
      console.log('chakan', type,row)
      if(type == 'submit'){
        this.$confirm('您确定要重新提交吗?', '重新提交', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          updateStatus({
            id: row.id,
            ischeck: 2
          }).then(res => {
            this.getList(true);
          });
        })
      } else {
        this.$confirm('您确定要删除吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          delCategory(row.id).then(res => {
            this.getList(true);
          });
        });
      }
    },
    getList(flag){
      const {page, pageSize} = this.$refs.customPage
      if(!flag){
        this.tableData = [];
      }
      getCategoryList({ page, pageSize }).then(res =>{
        this.tableData = res.data || [];
        this.total = res.total;
      })
    }
  },
  mounted(){
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.el-button--small{
  padding: 9px 10px;
}
.tagClass{
  width: 65px;
  text-align: center;
}
.tag_success{
  background: #E8F5EE;
  border: 1px solid #4CCA86;
}
.tag_warn{
  background: #FFF6ED;
  border: 1px solid #FF9F38;
}
.tag_danger{
  background: #FFEAEC;
  border: 1px solid #FF4146;
}
</style>
